import React, { useEffect, useRef, useState } from 'react'
import { Table, message, Modal } from 'antd'
import TheButton from '@/components/TheButton';
import TheQueryForm from '@/components/TheQueryForm';
import { useNavigate } from 'react-router-dom';
import { freightTemplatePage, freightTemplateDelete } from '@/api/goodsManagement/freightTemplate.js';
export default function FreightTemplateList() {
  const navigate = useNavigate();
  const [pageNo, setPageNo] = useState(1)
  const [total, setTotal] = useState(0)
  const [pageSize, setPageSize] = useState(10)
  const queryFormRef = useRef()
  const [searchOption, setSearchOption] = useState([
    { field: 'freightTemplateName', label: '模板名字', placeholder: '请输入订单编号', required: false, rules: [], type: 'Input', defaultValue: '' },
    { field: 'pricingMethod', label: '模板类型', placeholder: '请选择', required: false, rules: [], type: 'Select', options: [{ label: '全部', value: '', }, { label: '包邮', value: 'FREE' }, { label: '门槛包邮', value: 'THRESHOLD_FREE' }], defaultValue: '' },
  ])
  const [queryForm, setQueryForm] = useState({})
  const [dataSource, setDataSource] = useState([])
  const [columns, setColumns] = useState([{
    title: '模板名称',
    dataIndex: 'freightTemplateName',
    key: 'freightTemplateName',
  }, {
    title: '模板类型',
    dataIndex: 'pricingMethod',
    key: 'pricingMethod',
    render: (text) => {
      let txt = ''
      switch (text) {
        case 'FREE':
          txt = '包邮'
          break;
        case 'THRESHOLD_FREE':
          txt = '门槛包邮'
          break;
        default:
          break;
      }
      return <span>{txt}</span>
    },
  }, {
    title: '操作',
    dataIndex: 'pricingMethod',
    key: 'pricingMethod',
    render: (text, record) => {

      return <span> <TheButton type="link"
        haspermi={[]}
        onClick={() => {
          navigate('/goodsManagement/freightTemplate/create', {
            state: {
              mode: 'view',
              freightTemplateId: record.freightTemplateId
            }
          })
        }
        } > 查看</TheButton>
        <TheButton type="link"
          haspermi={['goodsManagement:freightTemplate:edit']}
          onClick={() => {
            navigate('/goodsManagement/freightTemplate/create', {
              state: {
                mode: 'edit',
                freightTemplateId: record.freightTemplateId

              }
            })
          }
          } > 编辑</TheButton>
        <TheButton type="link"
          haspermi={['goodsManagement:freightTemplate:delete']}
          onClick={() => {
            Modal.confirm({
              title: '提示',
              content: '数据删除后无法恢复，是否确认删除？',
              okText: '确认',
              cancelText: '取消',
              onOk: () => onDel(record.freightTemplateId)
            });

          }
          } > 删除</TheButton>
      </span>
    },
  }])
  const pageChange = async (e) => {
    setPageNo(e)
    getData()
  }
  const onDel = (freightTemplateId) => {
    freightTemplateDelete({ freightTemplateId }).then(res => {
      if (res.code == 0) {
        message.success('删除成功')
        setPageNo(1)
        getData()
      }
    })
  }
  const getData = () => {
    const applyData = {
      pageNo,
      pageSize,
      ...queryForm
    }
    freightTemplatePage({ ...applyData }).then(res => {
      if (res.code == 0) {
        setDataSource(res.data)
        setTotal(res.totalCount)
      }
    })
  }
  //搜索
  let onFormSearch = async (values) => {
    // console.log(values, "queryForm");
    setQueryForm(values)

  }
  //重置
  let onReset = () => {
    setQueryForm({})
    getData()
  }
  useEffect(() => {
    getData()
  }, [])
  useEffect(() => {
    pageChange(1)

  }, [queryForm])
  return (
    <div>
      <TheQueryForm ref={queryFormRef} show={true} option={searchOption}
        onGetValues={(values) => onFormSearch(values)}
        onReset={(values) => onReset(values)}
      >

      </TheQueryForm>
      <div style={{ marginBottom: 10 }}>
        <TheButton
          haspermi={['goodsManagement:freightTemplate:create']}
          onClick={() => {
            navigate('/goodsManagement/freightTemplate/create', {
              state: {
                mode: 'create'

              }
            })
          }
          } > 新增</TheButton>
      </div>
      <Table bordered columns={columns} dataSource={dataSource} rowKey={(r) => r.freightTemplateId} pagination={{
        onChange: pageChange,
        position: ['bottomCenter'],
        current: pageNo,
        pageSize: pageSize,
        total: total,
        showSizeChanger: false
      }} />
    </div>
  )
}
